<template>
    <div class="wrap">
        <div class="singleTitle f-16 c-gray">前七日下单金额概况</div>
        <div id="chartWrap1" style="width:100%;height:400px"></div>
        <div class="reportItem">
            <div class="head c-white f-18">今日资金</div>
            <div class="body">
                <div class="detailItem">
                    <span class="w-100 text-r">账户余额:</span>
                    <span class="p-l-10 c-orange">152432.00元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">冻结金额:</span>
                    <span class="p-l-10 c-gray">152432.00元</span>
                </div>
                <div class="division"></div>
                <div class="detailItem">
                    <span class="w-100 text-r">充值金额:</span>
                    <span class="p-l-10 c-gray">152432.00元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">实际支出:</span>
                    <span class="p-l-10 c-gray">152432.00元</span>
                </div>
            </div>
        </div>
        <div class="reportItem">
            <div class="head c-white f-18">本月资金统计</div>
            <div class="body">
                <div class="detailItem">
                    <span class="w-100 text-r">账户余额:</span>
                    <span class="p-l-10 c-orange">152432.00元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">冻结金额:</span>
                    <span class="p-l-10 c-gray">152432.00元</span>
                </div>
                <div class="division"></div>
                <div class="detailItem">
                    <span class="w-100 text-r">充值金额:</span>
                    <span class="p-l-10 c-gray">152432.00元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">实际支出:</span>
                    <span class="p-l-10 c-gray">152432.00元</span>
                </div>
            </div>
        </div>
        <div class="reportItem">
            <div class="head c-white f-18">本月资金统计</div>
            <div class="body">
                <div id="chartWrap2" style="width:100%;height:400px"></div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'

import { Group, Cell, Loading, XButton, XDialog, Actionsheet, Divider } from 'vux'
import { WechatPlugin, ToastPlugin } from 'vux'
import { AlertPlugin, ConfirmPlugin } from 'vux'

import axios from '@/api/axios'
import api from '@/api/base.api'
import { Grid, GridItem } from 'vux'

var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
Vue.prototype.$echarts = echarts
export default {
    components: {
        Grid,
        GridItem
    },
    mounted() {
        this.draw1();
        this.draw2();
    },
    data() {
        return {
        }
    },
    methods: {
        draw1() {
            var myChart = this.$echarts.init(document.getElementById('chartWrap1'));
            myChart.showLoading();
            setTimeout(function() {
                myChart.hideLoading();
                // 绘制图表
                myChart.setOption({
                    title: { text: '在Vue中使用echarts' },

                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['08/01', '08/02', '08/03', '08/04', '08/05', '08/06', '08/07']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    },

                    series: [
                        {
                            name: '下单金额',
                            type: 'line',
                            smooth: true,
                            data: [11, 11, 15, 13, 12, 13, 10],
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                        }
                    ]
                });
            }, 10);
        },
        draw2() {
            var myChart = this.$echarts.init(document.getElementById('chartWrap2'));
            myChart.showLoading();
            setTimeout(function() {
                myChart.hideLoading();
                // 绘制图表
                myChart.setOption({
                    title: { text: '在Vue中使用echarts' },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                        type: 'category',
                        axisTick: { show: false }
                    },

                    series: [{
                        name: '销量',
                        type: 'bar',
                        barWidth: 30,
                        data: [5, 20, 36, 10, 10, 20],
                        label: {
                            normal: {
                                show: true,
                                position: 'right'
                            }
                        },
                    }]
                });
            }, 10);
        }
    }
}
</script>

<style lang="less">
@import '../assets/css/report.less';
</style>
